<template>
  <view class="bg-white">
    <!-- 顶部导航 -->

    <view class=" u-p-b-20" >
      <fa-search :mode="2" :no-focus="true"></fa-search>
<!--      <u-dropdown  ref="uDropdown">
        <u-dropdown-item title="全部分类">
          <u-grid :col="3" :border="false">
            <u-grid-item v-for="item in 9" >
              <u-button :custom-style="customStyle" shape="circle" size="medium">全部分类</u-button>
            </u-grid-item>
          </u-grid>
        </u-dropdown-item>
        <u-dropdown-item title="全部分类">
              <u-grid :col="3" :border="false">
                <u-grid-item v-for="item in 9" >
                  <u-button :custom-style="customStyle" shape="circle" size="medium">全部分类</u-button>
                </u-grid-item>
              </u-grid>
        </u-dropdown-item>
      </u-dropdown>-->
    </view>
    <u-tabs :list="tabList" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
    <!--    购买会员卡-->
    <view class="goods-list" v-if="current==0">
      <view class="item" :style="{background:theme.bgColor}"
            @click="goPage('/pages/goods/detail?id=')">

        <view class="title" style="color: white">储值卡</view>
        <image class="logo" src="/static/image/logo.png"></image>
        <view class="name">{{ item.title }}</view>
        <view class="buy">
          <u-button
              size="mini"
              hover-class="none"
              :custom-style="{width:'150rpx' ,fontWeight:'bold',fontSize:'30rpx',background: theme.bgColor, color: theme.color }"
              shape="circle"
              @click="goPage('/pages_sub/balance/balance')"
          >
            充值
          </u-button>
        </view>
      </view>
      <view class="item" v-for="(item, index) in goods" :key="index">
        <image class="image" :src="item.image || vuex_config.default_goods_img" mode="aspectFill"></image>
        <view class="title">{{ item.title }}</view>
        <view class="name">{{ item.title }}</view>
        <view class="buy">
          <u-button
              size="mini"
              type="primary"
              hover-class="none"
              :custom-style="{width:'150rpx' ,fontWeight:'bold',fontSize:'30rpx',background: theme.bgColor, color: theme.color }"
              shape="circle"
              @click="goPage('/pages/goods/detail?id=' + item.id)"
          >
            BUY
          </u-button>
        </view>
      </view>
      <!-- 空数据 -->
      <view class="u-flex u-row-center fa-empty top-15" v-if="!goods.length">
        <image src="../../static/image/data.png" mode=""></image>
        <view class="u-tips-color">暂无更多的商品数据~</view>
      </view>
    </view>
    <!--    我的会员卡-->
    <view class="goods-list" v-if="current==1" >
      <view class="item" :style="{background:theme.bgColor}"
           >

        <view class="title" style="color: white">储值卡</view>

        <view class="name2">
          <u-divider bg-color="transparent" color="white" border-color="white">
            <text>账户余额（元）</text>
          </u-divider>
          <view class="text-center text-lg text-white mt-2">{{ vuex_user.money }}元</view>
        </view>
        <view class="buy">
          <u-button
              size="mini"
              hover-class="none"
              :custom-style="{width:'150rpx' ,fontWeight:'bold',fontSize:'30rpx',background: theme.bgColor, color: theme.color }"
              shape="circle"
              @click="goPage('/pages_sub/balance/balance')"
          >
            充值
          </u-button>
        </view>
      </view>
      <view class="item" v-for="(item, index) in myCard" :key="index" @click="goPage('/pages_sub/card/cardInfo?id='+item.id)">
        <image class="image" :src="item.image || vuex_config.default_goods_img" mode="aspectFill"></image>
        <view class="title">{{ item.title }}</view>
        <view class="name">{{ item.title }}</view>
        <!--        <view class="buy">
                  <u-button
                      size="mini"
                      type="primary"
                      hover-class="none"
                      :custom-style="{width:'150rpx' ,fontWeight:'bold',fontSize:'30rpx',background: theme.bgColor, color: theme.color }"
                      shape="circle"
                      @click="goPage('/pages/goods/detail?id=' + item.id)"
                  >
                    BUY
                  </u-button>
                </view>-->
      </view>
      <!-- 空数据 -->
      <view class="u-flex u-row-center fa-empty top-15" v-if="!goods.length">
        <image src="../../static/image/data.png" mode=""></image>
        <view class="u-tips-color">暂无更多的商品数据~</view>
      </view>
    </view>
    <Footer :current="current"/>
    <!-- 回到顶部 -->
    <u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
                :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
  </view>
</template>

<script>

import Footer from "./components/Footer.vue";

export default {
  components: {
    Footer

  },
  onLoad(e) {
    this.category_id = 23;
    this.keyword = e.keyword || '';
    this.getGoods();
    this.getMyCard()
  },
  data() {
    return {
      customStyle:{
          width:'200rpx',
      },
      category_id: '',
      goods: [],
      scrollTop: 0,
      status: 'loadmore',
      is_update: false,
      has_more: false,
      page: 1,
      keyword: '',
      query: {},
      current: 0,
      tabList: [{name: '购买会员卡'}, {name: '我的会员卡'}],
      value: '',
      options: [{label: '全部分类', value: ''}],
      myCard: []
    };
  },
  methods: {
    getMyCard() {
      this.$api.getmyCardList({}).then(res => {
        this.myCard = res.data.data
      })
    },
    changeTab(e) {
      this.current = e
    },
    search(e) {
      this.page = 1;
      this.is_update = true;
      this.keyword = e;
      this.getGoods();
    },
    change(query) {
      this.query = query;
      this.page = 1;
      this.is_update = true;
      this.getGoods();
    },
    getGoods() {
      this.$api.getGoodsList({
        category_id: 100,
        page: this.page,
        keyword: this.keyword, ...this.query
      }).then(res => {
        if (res.code == 1) {
          if (this.is_update) {
            this.goods = [];
            this.is_update = false;
          }
          this.goods = [...this.goods, ...res.data.data];
          this.has_more = res.data.current_page < res.data.last_page;
        }
      });
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    if (this.has_more) {
      this.status = 'loading';
      this.page++;
      this.getGoods();
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
.goods-list {
  .item {
    width: 700rpx;
    height: 300rpx;
    position: relative;
    border-radius: 20rpx;
    margin: auto auto 20rpx;
    display: flex;
    align-items: center;

    .image {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }

    .title {
      position: absolute;
      left: 20rpx;
      top: 20rpx;
      font-size: 36rpx;
      font-weight: bold;
    }

    .name {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      text-align: center;
      line-height: 300rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: white;
    }

    .name2 {
      margin: auto;
    }

    .buy {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
    }

    .logo {
      width: 200rpx;
      height: 200rpx;
      display: block;
      margin: auto;
    }
  }
}

</style>
